<template>
  <div class="tab-container">
    <!-- 顶部切换栏 -->
    <div class="tab-header">
      <el-radio-group v-model="activeTab" type="button" size="medium">
        <el-radio-button label="eventDisposal">事件处置</el-radio-button>
        <el-radio-button label="disposalRecord">处置记录</el-radio-button>
        <el-radio-button label="predictionSimulation">预测模拟</el-radio-button>
      </el-radio-group>
      <el-button type="default" @click="handleReturn" plain class="return-btn"
        >返回</el-button
      >
    </div>

    <!-- 内容区域（可根据需求填充） -->
    <div class="tab-content">
      <div v-if="activeTab === 'eventDisposal'">
        <eventLine @showDiog="showDiog" />
      </div>
      <div v-if="activeTab === 'disposalRecord'">
        <handle />
      </div>
      <div v-if="activeTab === 'predictionSimulation'">
        <ycmn />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabSwitch",
  components: {
    eventLine: () => import("./eventLine.vue"), //事件处置
    handle: () => import("./handle.vue"), //处置记录
    ycmn: () => import("./predictionSimulation.vue"), //预测模拟
  },
  data() {
    return {
      activeTab: "eventDisposal", // 默认选中“事件处置”
    };
  },
  methods: {
    // 执行返回操作
    handleReturn() {
      // 可在此添加“返回”的业务逻辑（如路由跳转）
      console.log("点击了返回按钮");
      this.$emit("goback", "");
    },
    showDiog(id) {
      this.$emit("showDiog", id);
    },
  },
};
</script>

<style scoped>
.tab-container {
  overflow: hidden;
  width: 100% !important;
  height: 100%;
  display: grid;
  grid-gap: 8px;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  border-bottom: 1px solid #ddd;
}
.tab-content > div {
  width: 100%;
  height: 100%;
}

.return-btn {
  margin-left: 10px;
}

/* 自定义 RadioButton 选中样式，使其更贴近设计 */
::v-deep .el-radio-button__inner {
  color: #333;
  border-color: #dcdcdc;
}
::v-deep .el-radio-button.is-active .el-radio-button__inner {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
</style>
